
import React, { useState, useContext, useCallback, forwardRef } from 'react'
import CustomizeModal, { CustomizeModalButton, CustomizeModalContext } from '@common/presentational/CustomizeModal'
import { useDispatch } from 'react-redux'
import { Radio, Space } from 'antd'
import { modifyCustomerCard } from '@sagas/customer'

const ModifyCardContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { callback } = props
    const { cards = [], member_id, card_id } = params
    const [cardId, setCardId] = useState(card_id)

    const dispatch = useDispatch()

    const submit = () => {
        if (card_id !== cardId) {
            dispatch(modifyCustomerCard({
                member_id,
                card_id: cardId
            }, () => {
                callback && callback()
            }))
        }
        hide()
    }

    const cardIdChange = useCallback(e => {
        setCardId(e.target.value)
    }, [])

    return (
        <>
            <div className="ft-clr-md" style={{ margin: '-15px 0 20px' }}>可修改当前客户持有会员卡</div>
            <Radio.Group onChange={cardIdChange} value={cardId}>
                <Space direction="vertical">
                    {cards.map(c => <Radio key={c.card_id} value={c.card_id}>{c.card_name}</Radio>)}
                </Space>
            </Radio.Group>
            <CustomizeModalButton
                onOk={submit}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal width={500} title="设置会员卡" ref={ref}>
        <ModifyCardContent {...props} />
    </CustomizeModal>
))
